<template>
  <div ref="bar" class="charts chart-bar"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from '@/components/charts/theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
    name: 'ChartBar',
    data () {
        return {
            chart_dom: ''
        }
    },
    props: {
        xData: Array,
        seriesData: Array
    },
    mounted () {
        this.$nextTick(() => {
            this.init()
        })
    },
    methods: {
        init () {
            this.chart_dom = echarts.init(this.$refs.bar, 'tdTheme')
            let option = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    top: '3%',
                    left: '5%',
                    right: '4%'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.xData,
                        axisTick: {
                            alignWithLabel: true
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        name: '发帖数',
                        nameLocation: 'middle',
                        nameGap: 36,
                        type: 'value',
                        minInterval: 1
                    }
                ],
                dataZoom: [{
                    type: 'inside',
                    show: true,
                    xAxisIndex: [0]
                }],
                series: this.seriesData
            }
            this.chart_dom.setOption(option)
        },
        resize () {
            this.$nextTick(() => {
                this.chart_dom.resize()
            })
        }
    }
}
</script>

<style lang="less">
.chart-bar {
	height: 100%;
}
</style>
